<template>
  <el-popover v-model="popoverShow" placement="bottom" width="450" trigger="manual">
    <FilterItem ref="filterItem" class="topo-open" :form-data="formData" page="home" />
    <div style="text-align: right; margin: 10px">
      <el-button size="mini" @click="cancel">{{ $t('CANCEL') }}</el-button>
      <el-button size="mini" @click="$debounce(confirm)">{{
        routeCount || recommended ? $t('RECOMMENDER') : $t('GET_RECOMMENDED_ROUTES')
      }}</el-button>
    </div>
    <div slot="reference">
      <slot>
        <el-button
          type="primary"
          :disabled="(curProcess < 100 || recommended) && curProcess !==0"
          @click="popoverShow = true"
        >{{
          routeCount || recommended ? $t('RECOMMENDER') : $t('GET_RECOMMENDED_ROUTES')
        }}</el-button>
      </slot>
    </div>
  </el-popover>
</template>
<script>
  import FilterItem from '@/views/module/business/manager/components/open/FilterItem'
  export default {
    components: { FilterItem },
    props: {
      curProcess: {
        type: Number,
        default: 0
      },
      routeCount: {
        type: Number,
        default: 0
      },
      formData: {
        type: Object,
        default: () => {}
      },
      recommended: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        popoverShow: false
      }
    },
    methods: {
      showPopover() {
        this.popoverShow = true
      },
      cancel() {
        this.popoverShow = false
        this.$emit('cancel')
      },
      confirm() {
        this.popoverShow = false
        this.$refs.filterItem.getFormData()
        this.$emit('confirm')
      }
    }
  }
</script>
